<template>
    <div style="background-image: url('http://localhost:5173/src/Image/04730cc1-e39b-4d0f-ac09-dca113ffcca5.png');background-size: cover;height: 80px;"></div>

    <div style="margin-top: 20px;"><el-card  style="height: 130px;" shadow="hover">
        <tr>
            <td><el-card style="width: 170px;height: 80px;border: none;"  shadow="hover"><router-link style="text-decoration: none;color: #6495ED;" to="">入库单</router-link></el-card></td>
            <td><el-card style="width: 170px;height: 80px;border: none;margin-left: 20px;"  shadow="hover"><router-link style="text-decoration: none;color: #6495ED;" to="">出库单</router-link></el-card></td>
            <td><el-card style="width: 170px;height: 80px;border: none;margin-left: 20px;"  shadow="hover"><router-link style="text-decoration: none;color: #6495ED;" to="/Allot">库存调拨</router-link></el-card></td>
        </tr>
        
    </el-card></div>

<el-card style="margin-top: 20px;height: 180px;width: 1450px;">
<div style="float: left;"><strong>今日概况：</strong></div><div style="margin-left: 670px;"><strong>昨日概况：</strong></div>
<div style="margin-left: 80px;margin-top: 25px;font-size: small;border-right: 1px solid gainsboro;width: 250px;height: 80px; float: left;">
单据数量&#160&#160&#160{{ oidata.rNum }}<br></br><br></br>
入库数量&#160&#160&#160{{ oidata.rQuantity }}<br></br><br></br>
入库金额&#160&#160&#160{{ oidata.rAmount }}<br></br>
<el-tag type="success" style="position:relative;top:-80px;left:180px;">入库</el-tag>
</div>
<div style="margin-left: 80px;margin-top: 25px;font-size: small;border-right: 1px solid gainsboro;height: 80px;width: 250px;float: left;">
单据数量&#160&#160&#160{{ oidata.cNum }}<br></br><br></br>
出库数量&#160&#160&#160{{ oidata.cQuantity }}<br></br><br></br>
出库金额&#160&#160&#160{{ oidata.cAmount }}<br></br>
<el-tag type="warning" style="position:relative;top:-80px;left:180px;">出库</el-tag>
</div>
<div style="margin-left: 80px;margin-top: 25px;font-size: small;border-right: 1px solid gainsboro;height: 80px;width: 250px;float: left;">
单据数量&#160&#160&#160{{ yoidata.rNum }}<br></br><br></br>
入库数量&#160&#160&#160{{ yoidata.rQuantity }}<br></br><br></br>
入库金额&#160&#160&#160{{ yoidata.rAmount }}<br></br>
<el-tag type="success" style="position:relative;top:-80px;left:180px;">入库</el-tag>
</div>
<div style="margin-left: 80px;margin-top: 25px;font-size: small;height: 80px;width: 250px;float: left;">
单据数量&#160&#160&#160{{ yoidata.cNum }}<br></br><br></br>
出库数量&#160&#160&#160{{ yoidata.cQuantity }}<br></br><br></br>
出库金额&#160&#160&#160{{ yoidata.cAmount }}<br></br>
<el-tag type="warning" style="position:relative;top:-80px;left:180px;">出库</el-tag>
</div>
</el-card>
<div style="height: 430px;width: 1450px; ">
<el-card style="width: 690px;height:400px;margin-top: 25px;float: left;">
    <div style="float: left;"><strong>库存数量占比</strong></div>
    <br></br>
    <hr></hr>
<div id="main" style="width: 400px;height:400px;position:relative;top:-10px;left:90px;"></div>
</el-card>


<el-card style="width: 690px;height:400px;margin-top: 25px;margin-left: 60px;float: right;">
    <div style="float: left;"><strong>库存金额占比</strong></div>
    <br></br>
    <hr></hr>
<div id="main2" style="width: 400px;height:400px;position:relative;top:-10px;left:90px;"></div>
</el-card>
</div>

<el-card style="height: 400px;width: 1450px;margin-top: 25px;">
    <div style="float: left;"><strong>出库流水预测</strong></div>
    <br></br>
    <hr></hr>
<div id="main3" style="width: 1400px;height:400px;position:relative;top:-10px;left:-5px;"></div>
</el-card>




</template>

<script setup lang="ts">

import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import dayjs from 'dayjs';
import axios, { Axios } from 'axios';
onMounted(()=>{
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
var myChart2 = echarts.init(document.getElementById('main2'));
myChart2.setOption(option2);
for(var i=1;i<=7;i++){
const yesterday = dayjs().add(i, 'day');
(option3.xAxis.data as string[]).push(yesterday.format('YYYY-MM-DD'))
}
OutOrIn();
yc();
})
const option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '15%',
    left: 'center'
  },
   graphic: [
        {
            type: 'text',
            left: 'center',
            top: 'center',
            style: {
                text: '1222\n总库存',
                textAlign: 'center',
                fill: '#333',
                fontSize: 20
            }
        }
    ],
  series: [
    {
      name: '库存数量占比',
      type: 'pie',
      radius: ['30%', '50%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center',
      },
      emphasis: {
        label: {
          show: false,
          fontSize: 20,
          fontWeight: 'bold',
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '仓库1' },
         { value: 1048, name: '仓库2' },
         { value: 1048, name: '仓库3' },
         { value: 1048, name: '仓库4' },
      ]
    }
  ]
};
const option2 = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '15%',
    left: 'center'
  },
   graphic: [
        {
            type: 'text',
            left: 'center',
            top: 'center',
            style: {
                text: '1222.00\n总金额',
                textAlign: 'center',
                fill: '#333',
                fontSize: 20
            }
        }
    ],
  series: [
    {
      name: '库存数量占比',
      type: 'pie',
      radius: ['30%', '50%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center',
      },
      emphasis: {
        label: {
          show: false,
          fontSize: 20,
          fontWeight: 'bold',
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '仓库1' },
         { value: 1048, name: '仓库2' },
         { value: 1048, name: '仓库3' },
         { value: 1048, name: '仓库4' },
      ]
    }
  ]
};
const option3 = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: 
    {
      type: 'category',
      data: [],
      axisTick: {
        alignWithLabel: true
      }
    }
  ,
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: 
    {
      name: '出库流水',
      type: 'bar',
      barWidth: '60%',
      data: []
    }
  
};

const yc=async()=>{
for(var i=0;i<7;i++){
await axios.post("api/app/inventory-records/mlnet").then(res=>{
  (option3.series.data as string[]).push(res.data.data);
})
}
var myChart3 = echarts.init(document.getElementById('main3'));
myChart3.setOption(option3);
console.log(option3.series.data)
}

const OutOrIn=()=>{
  var datenow= dayjs().format("YYYY-MM-DD");
  axios.get("api/app/inventory-records?date="+datenow).then(res=>{
    oidata.value=res.data.data;
  })
  var ydate= dayjs().subtract(1,'day').format("YYYY-MM-DD");
    axios.get("api/app/inventory-records?date="+ydate).then(res=>{
    yoidata.value=res.data.data;
  })
}
const oidata=ref({
    "rQuantity": null,
    "rAmount": "",
    "cQuantity": null,
    "cAmount": "",
    "cNum": null,
    "rNum": null,
})
const yoidata=ref({
    "rQuantity": null,
    "rAmount": "",
    "cQuantity": null,
    "cAmount": "",
    "cNum": null,
    "rNum": null,
})
</script>

<style scoped>

</style>